/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
	AppRegistry,
	StyleSheet,
	Text,
	View,
	Image,
	TextInput,
	TouchableOpacity,
	ToolbarAndroid,
	Dimensions,
	Platform,
	BackHandler,
	ScrollView,
	NativeModules,
	NetInfo,
} from 'react-native';

import Toast from 'react-native-root-toast';
import Common from '../../component/common';
import ScreenUtils from '../../component/ScreenUtils';
import TipModal from './part/tipModal';
import ToolbarComponent from '../../component/ToolbarComponent';

const totalWidth = Dimensions.get('window').width;
import Protocol from './protocol';



export default class about extends Component {
	constructor(props) {
		super(props);
		this.state = {
			version:"",
			modalVisible: false,
			status: "loading",
			StatusText: "",
			versionStatus:false,
			mynetInfo: false,
			newVersion:''
		};
	}
	componentWillMount() {
		NetInfo.isConnected.fetch().done(
			(isConnected) => {
				this.setState({
					mynetInfo: isConnected
				})
			}
		);
		// 监测网络情况
		NetInfo.isConnected.addEventListener(
			'connectionChange',
			this._handleConnectionInfoChange.bind(this)
		);
		if(Platform.OS === 'android') {
			BackHandler.addEventListener('hardwareBackPress', () => Common.onBack(this));
		}
	}
	componentWillUnmount() {
		if(Platform.OS === 'android') {
			BackHandler.removeEventListener('hardwareBackPress', () => Common.onBack(this));
		}
	}
	componentDidMount() {
		this.getVersion();
	}
	_handleConnectionInfoChange(isConnected) {
		this.setState({
			mynetInfo: isConnected
		})
	}

	_update(callback) {
		if(this.state.mynetInfo) {
			NativeModules.JsAndroid.jsVersion(
				(msg) => {

				},
				(versionStatus, version) => {
					
					this.setState({
						versionStatus:versionStatus,
						newVersion: version
					})
					/*
					 * versionStatus：当前的版本和服务器版本是否一致，是否需要更新    （bool）
					 * version: 当前的版本（String）
					 * */
					callback && callback();
					
				}
			);
		} else {
			Toast.show("当前没有网络", {
				duration: 1000,
				position: Toast.positions.CENTER,
				shadow: true,
				animation: true,
				hideOnPress: true,
				delay: 0
			})
		}
	}
	_updateVersion (){
		var that = this;
		this._update(function(){
			that.setState({
				modalVisible: true,
				status: "loading",
				StatusText: "检查版本更新中",
			});
			//alert(that.state.versionStatus);
			if(!that.state.versionStatus) {
				that.timer = setTimeout(
					() => {
						that.setState({ status: "success", StatusText: "当前已是最新版本" });
						that.cleartimer = setTimeout(
							() => {
								that.setState({
									modalVisible: false,
									status: "loading",
									StatusText: "",
								})
							},
							1500
						)
					},
					1500
				)
			} else {
				that.timer = setTimeout(
					() => {
						that.setState({ status: "new", StatusText: "检测到新版本(" + that.state.newVersion + ")" });
					},
					2000
				)
			}			
		})	
		
	}
	getVersion(){
		let that=this;
		NativeModules.JsAndroid.jsGetVersionName(
			(msg) => {
		    	console.log(msg);
		  	},
		  	(version) => {
				that.setState({
					version : version
				})
			}
		);
	}
	handleChange(val) {
		this.setState({
			modalVisible: val,
			status: "loading",
			StatusText: "",
		});
	}
	
	render() {

		return(
			<View style ={styles.feedBackContainer}>
		  	    <ToolbarComponent
		          leftItem={{
		            title: 'Back',
		            layout: 'icon',
		            icon: require("../../images/back.png"),
		            onPress: () => {
		              Common.onBack(this);
		            },
		          }}
		        >
		          	<View style={styles.toolbarV}>
		            	<Text style={styles.toolbarT} numberOfLines={1}>关于我们</Text>
						
		          	</View>
		        </ToolbarComponent>
		      	<ScrollView
					contentContainerStyle={styles.feedBackWrap}
					keyboardShouldPersistTaps="always" 
					showsVerticalScrollIndicator ={false}
		      	>
		    		<View style={styles.aboutus}>
					{this.state.modalVisible ? <TipModal onChange={(val)=> this.handleChange(val)} statusText={this.state.StatusText} status={this.state.status} show={this.state.modalVisible} style={styles.modals}/> : null}
		    			<View style={[styles.alignCenter,styles.aboutIcon]}>
		    				<Image source = {require('../../images/mine/yingxiang.png')}/>
							<View style={styles.versionWrap}>
								<Text style={styles.version}>版本:{this.state.version}</Text>
								<TouchableOpacity
									onPress ={this._updateVersion.bind(this)}	
								>
									<Text style={[styles.version,styles.checkVersion]}>检查更新</Text>
								</TouchableOpacity>
				  			</View>
		    			</View>
		    			<View style={styles.alignCenter}>
		    				<View style={styles.btnWrap}>
		    					<Text style={styles.aboutUsText}>浏览</Text>
		    					<TouchableOpacity
		    					 onPress = {() => Common.onForward(this,Protocol,Protocol)}
		    					>
		    						<Text style={[styles.aboutUsText,styles.pressBtnStyle]}>《使用协议》</Text>
		    					</TouchableOpacity>
		    				</View>
		    				<Text style={styles.aboutUsText}>北京魔码文化传媒有限公司版权所有</Text>
		    			</View>
		    			<View style={styles.alignCenter}>
		    				<Text style={styles.aboutUsText}>Copyright &nbsp; &copy;</Text>
							<Text style={styles.aboutUsText}>All Rights Reserved</Text>
		    			</View>
		    		</View>
		      	</ScrollView>
		    </View>
		);
	}
}

const styles = StyleSheet.create({
	feedBackContainer: {
		flex: 1,
		backgroundColor: "#f6f6f6",
		flexDirection: "column",
	},
	toolbarV: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
	},
	toolbarT: {
		color: '#ffffff',
		fontWeight: 'bold',
		fontSize: 20
	},
	aboutus:{
		margin: ScreenUtils.scaleSize(10),
		borderRadius:5,
		paddingTop:ScreenUtils.scaleSize(48),
		paddingBottom:ScreenUtils.scaleSize(48),
		paddingLeft:ScreenUtils.scaleSize(30),
		paddingRight:ScreenUtils.scaleSize(30),
		backgroundColor:"#fff",
	},
	alignCenter:{
		flex:1,
		justifyContent:"center",
		alignItems:"center",
	},
	aboutIcon:{
		paddingTop:ScreenUtils.scaleSize(60),
		paddingBottom:ScreenUtils.scaleSize(30),
	},
	versionWrap:{
		flex:1,
		display:"flex",
		flexDirection:'row',
		alignItems:"center",
		justifyContent:"center"
		
	},
	version:{
		fontSize:ScreenUtils.scaleSize(20),
		color:"#838383",
		textAlign:"center",
		paddingVertical:ScreenUtils.scaleSize(15),
	},
	checkVersion:{
		marginLeft:5,
		color:"#364d7f",
	},
	btnWrap:{
		flex:1,
		flexDirection:"row",
	},
	aboutUsText:{
		color:"#605e5f",
		fontSize:ScreenUtils.scaleSize(28),
		paddingVertical:ScreenUtils.scaleSize(15) 
	},
	pressBtnStyle:{
		color:"#364d7f"
	}
});